<template>
    <el-form ref="form" :model="curData" status-icon>
        <el-row>
            <el-col :span="10" :offset="1">
                <div class="treeTitle">菜单</div>
                <div class="treeBody">
                    <el-scrollbar wrap-class="scrollbar-wrap" view-class="scrollbar-view">
                        <el-tree
                            :data="menus"
                            highlight-current
                            default-expand-all
                            :expand-on-click-node="false"
                            @node-click="handleMenu"
                            node-key="id">
                        </el-tree>
                    </el-scrollbar>
                </div>
            </el-col>
            <el-col :span="10" :offset="1">
                <div class="treeTitle">权限</div>
                <div class="treeBody">
                    <el-scrollbar wrap-class="scrollbar-wrap" view-class="scrollbar-view">
                        <el-tree
                            ref="permTree"
                            :data="perms"
                            highlight-current
                            show-checkbox
                            default-expand-all
                            check-on-click-node
                            check-strictly
                            :expand-on-click-node="false"
                            :default-checked-keys="leafPerms"
                            :render-content="renderContent"
                            node-key="id">
                        </el-tree>
                    </el-scrollbar>
                </div>
            </el-col>
        </el-row>

        <el-form-item class="formBtn">
            <el-button type="info" @click="handleCancel" size="medium">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="medium">确定</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import edtiMixin from '@/mixins/edit.mixin'
    import {mapState, mapActions} from 'vuex'
    export default {
        mixins: [edtiMixin],
        data() {
            return {
                leafPerms: [],
                curData: {
                  menuId: ''
                },
                editApi: this.$api.system.role.toPermsByMenuId
            }
        },
        computed: {
            perms: {
                get() {
                    return this.$store.state.basic.perms
                },
                set(val) {
                    this.$store.state.basic.perms = val;
                }
            },
            ...mapState('basic', ['menus'])
        },
        methods: {
            ...mapActions('basic', ['doMenusOfBasic','doPermsOfBasic']),
            handleMenu(data) {
                this.doPermsOfBasic(data.id);
                this.$ajax.get(this.$api.system.role.ofPermsByMenuId,{id:this.curData.id,menuId:data.id}).then(result => {
                    this.leafPerms = result.bean;
                });
                this.curData.menuId = data.id;
            },
            resetEditParams(params) {
                let keys = this.$refs.permTree.getCheckedKeys();
                let halfkeys = this.$refs.tree.getHalfCheckedKeys();
                params = {...params,...{permIds:[...keys,...halfkeys]}};
                return params;
            },
            renderContent(h, { node, data, store }) {
                return (
                    <span class="custom-tree-node">
                        <span>{node.label}</span>
                        <span>{data.code}</span>
                    </span>);
            }
        },
        mounted() {
            this.perms=[];
            this.doMenusOfBasic();
        }
    }
</script>

<style scoped lang="less">
    @import "../../../assets/css/common.less";

    .treeTitle {
        border: 1px solid #DCDFE6;
        background: #f9fafc;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }

    .treeBody {
        border: 1px solid #DCDFE6;
        height: 350px;
        padding: 5px 5px;
        margin-bottom: 10px;
        margin-top: -1px;
    }
</style>
